<template>
<div>
    <Breadcrumb>
      <BreadcrumbItem>增加用户</BreadcrumbItem>
    </Breadcrumb>
    <Divider />
    <i-form ref:formValidate :model="formValidate" :rules="ruleValidate" :label-width="120">
        <Form-item label="用户账号" prop="userName">
            <i-input v-model="formValidate.userName" placeholder="请输入用户账号" style="width:300px"></i-input>
        </Form-item>
        <Form-item label="用户密码" prop="password">
            <i-input type="password" v-model="formValidate.password" placeholder="请输入用户密码" style="width:300px"></i-input>
        </Form-item>
        <Form-item label="确认密码" prop="passwordCheck">
            <i-input type="password" v-model="formValidate.passwordCheck" placeholder="请再次输入确认密码" style="width:300px"></i-input>
        </Form-item>
        <Form-item label="用户电话号码" prop="phoneNumber">
            <i-input v-model="formValidate.phoneNumber" placeholder="请输入用户电话" style="width:300px"></i-input>
        </Form-item>

        <Form-item label="用户生日">
            <Row>
                <i-col span="11">
                    <Form-item prop="birthday">
                        <Date-picker type="date" placeholder="选择日期" v-model="formValidate.birthday"></Date-picker>
                    </Form-item>
                </i-col>
            </Row>
        </Form-item>
        <Form-item label="用户性别" prop="gender" style="width:382px">
            <RadioGroup v-model="formValidate.gender">
              <Radio label="1">男</Radio>
              <Radio label="0">女</Radio>
          </RadioGroup>
        </Form-item>
         <Form-item label="用户账号状态" prop="state" style="width:420px">
            <i-input  v-model="formValidate.state" placeholder="请输入用户账号状态"></i-input>
        </Form-item>
         <Form-item label="用户是否认证" prop="isAuth" style="width:420px">
            <i-input  v-model="formValidate.isAuth" placeholder="请输入用户权限"></i-input>
        </Form-item>
         <Form-item label="用户可贷金额" prop="avaiableAmount" style="width:420px">
            <i-input  v-model="formValidate.avaiableAmount" placeholder="请输入用户可贷金额"></i-input>
        </Form-item>
         <Form-item label="用户剩余贷款额度" prop="surplusAmount" style="width:420px">
            <i-input  v-model="formValidate.surplusAmount" placeholder="请输入用户剩余贷款额度"></i-input>
        </Form-item>
        <Form-item>
            <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
            <i-button type="content" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
        </Form-item>
    </i-form>
</div>
</template>
<script>
export default {
  data () {
    const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    // if (this.formValidate.passwordCheck !== '') {
                    //     // 对第二个密码框单独验证
                    //     this.$refs.formValidate.validateField('passwordCheck');
                    // }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.formValidate.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
    return {
      formValidate: {
        userId:'',
        userName: '',
        password: '',
        passwordCheck: '',
        phoneNumber: '',
        gender: '',
        birthday: '',
        iconImg: '',
        state:'',
        isAuth:'',
        avaiableAmount:'',
        surplusAmount:''
      },
      ruleValidate: {
        userName: [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2到 8 个字符', trigger: 'blur' },
           {validator: validatePass, trigger: 'blur' }
        ],
        passwordCheck: [
          { validator: validatePassCheck, trigger: 'blur' }
        ],
                  
        phoneNumber: [
         { required: true, message: "请输入手机号码", trigger: "blur" },
           { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" }
        
        ],

        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],

        birthday: [
          { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
        ],

        state: [
          { required: true, message: '状态不能为空', trigger: 'blur' }
        ],
        isAuth: [
          { required: true, message: '权限不能为空', trigger: 'blur' }
        ],
        avaiableAmount: [
          { required: true, message: '可贷金额不能为空', trigger: 'blur' }
        ],
        surplusAmount: [
          { required: true, message: '剩余贷款额度', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
   //提交
    handleSubmit:function (name) {
      this.$axios.post('users',{
        userId:this.formValidate.userId,
        userName:this.formValidate.userName,
        password:this.formValidate.password,
        passwordCheck:this.formValidate.passwordCheck,
        phoneNumber:this.formValidate.phoneNumber,
        gender:this.formValidate.gender,
        birthday:this.formValidate.birthday,
        iconImg:this.formValidate.iconImg,
        state:this.formValidate.state,
        isAuth:this.formValidate.isAuth,
        avaiableAmount:this.formValidate.avaiableAmount,
        surplusAmount:this.formValidate.surplusAmount,
      })
      .then(response=>{
        if(response.data.code==0){
          this.$router.push("users"),
          alert("添加成功")
        }
      }
      )
        .catch()
    },
//重置
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>
